<template>
    
    <v-sheet border rounded>
        <v-data-table :items="items"  :headers="headers" :loading="loading">
            <template v-slot:loading>
                <v-skeleton-loader type="table-row@10"></v-skeleton-loader>
            </template>

            <template v-slot:top>
                <v-row align="center" align-self="center" class="x-row-style">
                    <v-col span="2">
                        <v-text-field
                            v-model="search"
                            label="输入代码或名称以查找..."
                            prepend-inner-icon="mdi-magnify"
                            variant="solo-filled"
                            hide-details
                            density="compact"
                            single-line
                        ></v-text-field>
                    </v-col>
                    <v-col span="4">
                        <v-btn
                        prepend-icon="mdi-plus"
                        @click="addDialogShow"
                        >
                        <template v-slot:prepend>
                            <v-icon color="success"></v-icon>
                        </template>
                        添加关注
                        <template v-slot:append>
                            <v-icon color="warning"></v-icon>
                        </template>
                        </v-btn>
                    </v-col>
                    <v-col span="6">

                    </v-col>
                </v-row>
                <v-divider :thickness="3"></v-divider>
            </template>


            <template v-slot:item.horsepower="{ value }">
                <div class="text-medium-emphasis">
                    <span>{{ value }}</span>

                    <v-icon icon="mdi-horse-variant-fast" end></v-icon>
                </div>
            </template>

            <template v-slot:item.actions="{ item }">
                <v-btn variant="text" icon @click="edit(item)" @mouseenter="register($event)">
                    <v-icon color="green-darken-2">mdi-pencil</v-icon>
                </v-btn>

                <v-btn variant="text" icon @click="remove(item.key)">
                    <v-icon color="orange-darken-2">mdi-delete</v-icon>
                </v-btn>
            </template>


        </v-data-table>
        <EditDialog :showDialog='showInfoDialog' :closeDialog="closeDialog" />
        <AddFollowDialog :display='displayAddDialog' :close="closeAddDialog" />
    </v-sheet>
</template>
<script setup>
import { shallowRef, defineProps } from 'vue'
const displayAddDialog = ref(false)
const showInfoDialog = ref(false)
const loading = shallowRef(false)
const search = ref('');
const props = defineProps({
    title: {
        type: String,
        default: 'Default Title'
    },
    headers: {
        type: Array,
        default: () => []
    },
    items: {
        type: Array,
        default: () => []
    },
})



function onClick() {
    loading.value = true
    setTimeout(() => {
        loading.value = false
    }, 2000)
}
function edit(item) {
    showInfoDialog.value = true; 
}
function addDialogShow() {
    displayAddDialog.value = true;
}
function register(event) {}
function remove(id) {}
function closeDialog() {
    showInfoDialog.value = false;
    console.log('---->',1111 )
}
function closeAddDialog() {
    displayAddDialog.value = false;
}
</script>
<style>
.x-divider {
    margin-bottom: 4px;
}
.x-row-style {
    padding: 2px 2px;
}
</style>